'use strict';

import React, { Component } from 'react';

import {
  PixelRatio,
  StyleSheet,
  View,
  Text,
  ScrollView
} from 'react-native';

import {NavigationBar} from 'react-native-navigator'
import Toast from 'react-native-toast'

import List from './list'

class ToastComponent extends Component {
  constructor(props) {
    super(props);
  
    this.state = {scenes: [
      {title: 'SHORT'},
      {title: 'LONG', duration: Toast.LONG},
      {title: 'TOP', gravity: Toast.TOP},
      {title: 'CENTER', gravity: Toast.CENTER},
      {title: 'BOTTOM', gravity: Toast.BOTTOM},
    ]};
  }
  render() {
    return (
      <View style={styles.container}>
        <NavigationBar navigator={this.props.navigator} title='Toast'/>
        <List style={styles.func_list} onItemSelected={(index)=> this.makeText(this.state.scenes[index])}>
        {this.state.scenes.map((s, i)=>{
          return (<Text key={i}>{s.title}</Text>);
        })}
        </List>
      </View>
    );
  }

  makeText(s) {
    Toast.show(s.title, s.duration, s.gravity);
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#F5FCFF',
  },
  func_list: {
    paddingTop: 78
  }
});


export default ToastComponent;